<template>
	<view class="friend">
		<!-- S 顶部导航 -->
		<sol-navbar title="投缘胶囊"></sol-navbar>
		<!-- E 顶部导航 -->

		<!-- S 临时好友招呼标签 -->
		<view class="friend-label">
			<text class="friend-label_name">临时招呼（6）</text>
			<text>8个小时后消失</text>
		</view>
		<!-- E 临时好友招呼标签 -->

		<!-- S 临时好友招呼 -->
		<view class="friend-list">
			<view class="friend-item">
				<sol-image class="friend-item_left" width="100rpx" height="100rpx" src="https://dummyimage.com/200x200"></sol-image>
				<view class="friend-item_right">
					<view class="friend-item_right-top">
						<text class="friend-item_right-title">标题</text>
						<text class="friend-item_right-datetime">刚刚</text>
					</view>
					<view class="friend-item_right-bottom">
						<text class="friend-item_right-text">暂无</text>
						<text class="friend-item_right-count">0</text>
					</view>
				</view>
			</view>
			<view class="friend-item">
				<sol-image class="friend-item_left" width="100rpx" height="100rpx" src="https://dummyimage.com/200x200"></sol-image>
				<view class="friend-item_right friend-item_right-last">
					<view class="friend-item_right-top">
						<text class="friend-item_right-title">标题</text>
						<text class="friend-item_right-datetime">刚刚</text>
					</view>
					<view class="friend-item_right-bottom">
						<text class="friend-item_right-text">暂无</text>
						<text class="friend-item_right-count">0</text>
					</view>
				</view>
			</view>
		</view>
		<!-- E 临时好友招呼 -->

		<!-- S 好友申请标签 -->
		<view class="friend-label">
			<text class="friend-label_name">好友申请</text>
			<text></text>
		</view>
		<!-- E 好友申请标签 -->

		<!-- S 好友申请-->
		<view class="friend-add-list">
			<view class="friend-add-item">
				<sol-avatar class="friend-add-item_left" src="https://dummyimage.com/200x200" :gender="2"
					size="md">
				</sol-avatar>
				<view class="friend-add-item_middle">
					<view class="friend-add-item_middle-name">不完整的蛋</view>
					<view class="friend-add-item_middle-extras">附加消息：蛋壳破碎？</view>
					<view class="friend-add-item_middle-time">23分钟前</view>
				</view>
				<view class="friend-add-item_right" :class="{'friend-add-item_right-btn': true}"
					@click="fnFriendEvent('open', 1)">待确认</view>
			</view>
			<view class="friend-add-item">
				<sol-avatar class="friend-add-item_left" src="https://dummyimage.com/200x200" :gender="2"
					size="md">
				</sol-avatar>
				<view class="friend-add-item_middle">
					<view class="friend-add-item_middle-name">不完整的蛋</view>
					<view class="friend-add-item_middle-extras">附加消息：写错了，是佘爱珍。写错了，是佘爱珍。写错了，是佘爱珍。写错了</view>
					<view class="friend-add-item_middle-time">23分钟前</view>
				</view>
				<view class="friend-add-item_right" :class="{'friend-add-item_right-btn': false}"
					@click="fnFriendEvent('open', 2)">已拒绝</view>
			</view>
		</view>
		<!-- E 好友申请 -->

		<!-- S 弹出好友申请头像 -->
		<sol-drawer v-model="drawerOpen" primary-text="同意" confirm-text="拒绝" cancel-text="忽略" @click="fnFriendEvent">
			<template v-slot:default>
				<view class="drawer-item">
					<sol-avatar src="https://dummyimage.com/200x200" size="lg"></sol-avatar>
					<text class="drawer-item_name">暮年</text>
				</view>
			</template>
		</sol-drawer>
		<!-- E 弹出好友申请头像 -->

		<view class="safe-area-inset-bottom" style="height: 96rpx;"></view>
	</view>
</template>

<script>
	export default {
		name: "Friend",
		data() {
			return {
				// 弹出好友申请头像
				drawerOpen: false,
			};
		},
		computed: {},
		methods: {
			// 弹出层选择事件
			fnFriendEvent(type = '', value = 0) {
				this.$log(this.$options.name, type, value);
				switch (type) {
					case 'open': // 打开
						this.drawerOpen = true;
						break;
					case 'mask': // 遮罩
						this.drawerOpen = false;
						break;
					case 'cancel': // 忽略
						break;
					case 'primary': // 同意
						break;
					case 'confirm': // 拒绝
						break;
				}
			}

		}
	}
</script>

<style lang="scss">
	.friend {
		min-height: 100vh;
		background-color: $--color-background;

		// 标签
		&-label {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 28rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #878787;
			letter-spacing: 4rpx;

			&_name {
				font-size: 32rpx;
				color: #DDDDDD;
			}
		}

		// 临时好友招呼列表
		&-list {
			margin: 0 28rpx;
			padding: 28rpx;
			background-color: #474e54;
			border-radius: 28rpx;
			overflow: hidden;
		}

		&-item {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: flex-start;


			&_left {
				width: 100rpx;
				height: 100rpx;
				background: #576069;
				border-radius: 50%;
				overflow: hidden;
			}

			&_right {
				flex: 1;
				padding-bottom: 32rpx;
				margin-left: 28rpx;
				margin-bottom: 32rpx;
				border-bottom: 2rpx #576069 solid;

				// 上部
				&-top {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 18rpx;
				}

				&-title {
					font-size: 32rpx;
					letter-spacing: 4rpx;
					font-weight: 400;
					color: #BBBBBB;
				}

				&-datetime {
					font-size: 24rpx;
					font-weight: 400;
					color: #878787;
				}

				// 下部
				&-bottom {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
				}

				&-text {
					font-size: 28rpx;
					letter-spacing: 4rpx;
					font-weight: 400;
					color: #DDDDDD;
				}

				&-count {
					padding: 4rpx 16rpx;
					border-radius: 28rpx;
					font-size: 24rpx;
					color: #DDDDDD;
					background-color: #ad4242;
				}

				// 最后项
				&-last {
					border-bottom: none;
					margin-bottom: 0;
					padding: 0;
				}
			}
		}

		// 好友申请
		&-add-list {
			padding: 28rpx;
		}

		&-add-item {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: flex-start;

			&_left {}

			&_middle {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;
				padding: 0 28rpx 28rpx;

				&-name {
					font-size: 32rpx;
					font-weight: 400;
					color: #DDDDDD;
				}

				&-extras {
					font-size: 28rpx;
					font-weight: 400;
					color: #BBBBBB;
					padding: 12rpx 0;
					line-height: 42rpx;
				}

				&-time {
					font-size: 24rpx;
					font-weight: 400;
					color: #878787;
				}
			}

			&_right {
				padding: 12rpx 24rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 4rpx;
				color: #BBBBBB;

				&-btn {
					color: #DDDDDD;
					background-color: #607d8b;
					border-radius: 28rpx;
				}
			}
		}

		// 弹出留言者头像
		.drawer-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding-bottom: 42rpx;

			&_name {
				margin-top: 28rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #DDDDDD;
			}
		}
	}
</style>
